<template>
  <div>
    <div class="mb-[15px]">
      <SearchBox :queryForm="searchList" :showExpland="false" @query="handleSearchQuery"
                 :show-export="false"/>
    </div>


    <div class="pb-[50px]">
      <QueryTable
        :list="dataList"
        :total="total"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="false"
        :show-section="true"

        pk="sku"
      >
        <template #title="{row}">
          <div>
            <div class="flex items-center w-[100%]">
              <ImagePreview :src="row.picture" width="50px" height="50px"/>
              <div class="ml-[10px]">{{ row.title }}</div>
              <div class="ml-[10px]">
              </div>
            </div>

          </div>

        </template>

        <template #name="{row}">
          <div>{{ row.name }}-{{ row.nameType }}</div>
        </template>
      </QueryTable>
    </div>


  </div>
</template>
<script setup lang="ts">
import QueryTable from "@/components/TableData/index.vue"
import {getSkuByIds1} from "@/api/mall/product/spu";
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";
import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
import ImagePreview from "@/components/ImagePreview/index.vue"
import {useMessage} from "@/hooks/web/useMessage";

const message = useMessage();

const props = defineProps({
  goodsIds: {
    type: String,
    required: false,
    default: ""
  }
})

const searchList: TradeOrderQueryVO[] = [
  {
    label: 'sku',
    code: 'sku',
    type: 'input'
  },

  {
    label: '商品名称/id',
    code: 'name',
    type: 'input'
  },
]

const total = ref(0);

const initQueryParams = {
  pageNo: 1, pageSize: 10
}
const queryParams = ref({
  ...initQueryParams
})


const th = ref([
  {
    name: 'sku',
    code: 'sku',
    type: 'numberRanger',
    search: true
  },
  {
    name: '属性',
    code: 'name',
    type: 'date',
    search: true
  },
  {
    name: '关联商品',
    code: 'title',
    search: false
  },
]);

const dataList = ref([]);

const ids = ref([])

const queryList = async () => {
  console.log(props.goodsIds, "666")
  let res = await getSkuByIds1({
    ids: props.goodsIds,
    ...queryParams.value
  })

  dataList.value = res.list;
  total.value = res.total;
}

const handleSearchQuery = (val) => {
  queryParams.value = {
    ...initQueryParams,
    ...val
  }
  queryList();
}

const handleBtnClick = (e) => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }

}


const fn = {
  pagination() {
    queryList()
  },
  selectionChange(rows) {
    ids.value = rows.data.ids;


  }
}

const confirm = (callback) => {

  let productList = dataList.value.filter(at => {

    let isIn = ids.value.find(item => {
      return item == at.sku
    })
    return !!isIn
  })

  if (productList.length == 0) {
    message.error("请选择sku")
  } else {
    callback && callback(productList)
  }

}

onMounted(() => {
  queryList();
})


defineExpose({
  confirm
})

</script>
<style lang="scss" scoped>

</style>
